/**
  * 头部导航栏
 */
<template>
  <div class="header_container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: 'Manage' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item v-for="(item, index) in $route.meta.user" :key="index">{{item}}</el-breadcrumb-item>
    </el-breadcrumb>

    <el-dropdown @command="handleCommand" menu-align="start">
      <img :src="baseImgPath + adminInfo.avatar" class="avator" alt>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="home">首页</el-dropdown-item>
        <el-dropdown-item command="signout">退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { baseImgPath } from "@/utils/env";

export default {
  data() {
    return {
      baseImgPath
    };
  },
  created() {
    if (!this.adminInfo.id) {
      this.getAdminData();
    }
  },
  computed: {
    ...mapState(["adminInfo"])
  },
  methods: {
    ...mapActions(["getAdminData",'setLoginKey']),
    async handleCommand(command) {
      if (command == "home") {
        this.$router.push("Manage");
      } else if (command == "signout") {
        this.setLoginKey('')
        // console.log(API);
        // const res = await API.Signout();
        // console.log(res);
        // if (res.status == 1) {
          this.$message({
            type: "success",
            message: "退出成功"
          });
          this.$router.push("/");
        // } else {
        //   this.$message({
        //     type: "error",
        //     message: res.message
        //   });
        // }
      }
    }
  }
};
</script>
<style scope lang="less">
@import "../assets/styles/mixin.less";
.header_container {
  background-color: #eff2f7;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px;
}
.avator {
  .wh(36px, 36px);
  border-radius: 50%;
  margin-right: 37px;
}
.el-dropdown-menu__item {
  text-align: center;
}
// .el-dropdown-link {
//   cursor: pointer;
//   color: #409eff;
// }
// .el-icon-arrow-down {
//   font-size: 12px;
// }
</style>